<link rel="stylesheet" href="/assets/home/plugin/raty/raty.css" />
<script src="/assets/home/plugin/raty/raty.min.js"></script>

<link rel="stylesheet" href="/assets/home/css/comment.css">

<img src="{$order.subject.thumbs_text}" style="width:100%;" class="wow">

<div class="weui-cells__title wow" style="font-size:16px;" data-wow-delay="100ms">{$order.subject.title}</div>

<form method="post">
    <div class="weui-cells weui-cells_form wow" data-wow-delay="200ms">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea" placeholder="请输入内容" name="content" rows="3" {$order.comment.id
                    ? "disabled" : "" }>{$order.comment.content}</textarea>
            </div>
        </div>
    </div>
    <div class="weui-cells weui-cells_form wow" data-wow-delay="200ms">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div id="raty" data-raty></div>
                <input type="hidden" name="rate" value="" />
            </div>
        </div>
    </div>

    <div class="action wow" data-wow-delay="300ms">
        {if condition="$order.comment.id"}
        <button type="button" class="mui-btn mui-btn-warning">已评价</button>
        {else /}
        <button type="submit" class="mui-btn mui-btn-primary">立即提交</button>
        {/if}
    </div>
</form>

<script>
    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: null // 可选滚动容器选择器，否则使用窗口
    }).init();

    const raty = new Raty(document.getElementById('raty'), {
        score: `{$order.comment.rate ? $order.comment.rate : 0}`,                           //评分数目
        starOn: "/assets/home/plugin/raty/images/star-on.png",        //满星的图片的地址
        starOff: "/assets/home/plugin/raty/images/star-off.png",      //空星的图片的地址
        starHalf: "/assets/home/plugin/raty/images/star-half.png",    //半星的图片的地址
        readOnly: Boolean(`{$order.comment.id ? true : false}`),                          //只读
        halfShow: true,                          //显示半星
        size: 10,                        //评分大小
        click: function (score, element, evt) {
            // console.log(score)
            $("input[name=rate]").val(score)
        }
    });
    raty.init();


</script>
